// 入口函数
$(function () {

    // 初始化页面
    // 封装成函数  以后会用
    function initArtCateList() {

        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data.data);
            if (res.data.status !== 0) {
                return layui.layer.msg(res.data.message)
            }
            let arr = [];
            res.data.data.forEach(function (item, index) {


                arr.push(`
                <tr>
                <td>${item.Id}</td>
                <td>${item.name}</td>
                <td>${item.alias}</td>
                <td>
                    <button class="btn-add layui-btn layui-btn layui-btn-xs" data-id="${item.Id}">修改</button>
                    <button class="btn-del layui-btn layui-btn-xs layui-btn-danger" data-id="${item.Id}">删除</button>
                </td>
                `)
            })
            // 处理数组在then方法里面 循环外面
            $('tbody').empty().html(arr.join(''))

        })
    };
    // 调用
    initArtCateList();

    let indexAdd
    //点击按钮 通过layui里面的layer 给出弹出层

    $('#addBtn').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: "添加文章分类",
            content: `
            <form class="layui-form" action="" id="formAdd" >
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                </div>
                </div>
                <div class="layui-form-item">
                <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
                </div>
            </form>
                `
        });

    })

    // 点击提交  事件委托  给form绑定submit  给body
    $('body').on('submit', '#formAdd', function (e) {
        e.preventDefault();
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(res => {
            console.log(res.data);
            if (res.data.status !== 0) {
                return layui.layer.msg(res.data.message)
            }
            //成功提示
            layer.msg('添加成功')
            // 刷新页面
            initArtCateList();
            $('input[name=name]').val('')
            $('input[name=alias]').val('')
            // 关闭弹出层
            layui.layer.close(indexAdd)

        })
    })



    //点击修改
    let indexXiu
    $('tbody').on('click', '.btn-add', function () {


        //修改弹出层搭建
        indexXiu = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: "修改文章分类",
            content: `
            <form class="layui-form" action="" id="formDel" lay-filter="editForm">
            <!-- 设置一个隐藏域input  存放id 以便获取 -->
            <input type="hidden" name="Id">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                </div>
                </div>
                <div class="layui-form-item">
                <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
                </div>
            </form>
                `
        });

        // 先获取信息
        let id = $(this).attr('data-id')
        console.log(id);
        // 发送ajax 渲染页面
        axios({
            method: 'GET',
            // url 写在路径中
            // 传值的时候  ：必须省略  /必须保留
            url: '/my/article/cates/' + id,
        }).then(res => {
            console.log(res);
            if (res.data.status !== 0) {
                return layui.layer.msg(res.data.message)
            }
            // 渲染到页面
            // $('input[name=name]').val(res.data.data.alias)
            // $('input[name=alias]').val(res.data.data.name)
            layui.form.val("editForm", res.data.data)
        })




    })

    // 更新
    $('body').on('submit', '#formDel', function (e) {
        e.preventDefault();
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(res => {
            console.log(res.data);
            if (res.data.status !== 0) {
                return layui.layer.msg(res.data.message)
            }
            //成功提示
            layer.msg('修改成功')
            // 刷新页面
            initArtCateList();
            $('input[name=name]').val('')
            $('input[name=alias]').val('')
            // 关闭弹出层
            layui.layer.close(indexXiu)

        })
    })




    //点击删除   事件委托
    $('tbody').on('click', '.btn-del', function () {

        let id = $(this).attr('data-id');
        console.log(id);
        // 询问框
        layer.confirm('确定删除？', function (index) {

            // 发送ajsx
            axios({
                method: 'GET',
                url: '/my/article/deletecate/' + id,
            }).then(res => {
                console.log(res.data);
                if (res.data.status !== 0) {
                    return layui.layer.msg(res.data.message)
                }
                //成功
                layui.layer.msg('删除成功')
                initArtCateList();
            })
            layer.close(index);
        });


    })




















});